<template>
    <div>
        <category :scene="show"></category>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:10px auto" >
            <div v-if=" show==0 ">
                <el-button type="primary" size="default" @click="changeShow" :disabled="useCategoryStore.c3Id?false:true">添加平台属性</el-button>
                <el-table  border stripe style="margin:10px auto" :data="useCategoryStore.attrInfoList">
                <el-table-column type="index" width="55" label="序号 " align="center"/>
                <el-table-column  width="100" label="属性名" align="center" prop="attrName"/>
                <el-table-column label="属性值名称" >
                <template #="{row,$index}">
                    <el-tag type="danger" size="small" v-for="(item,index) in row.attrValueList" :key="item.id" style="margin:0px 5px">{{item.valueName}}</el-tag>
                    
                    
                </template>
            </el-table-column>
                <el-table-column label="操作 " width="150">
                <template #="{row,$index}">
                   <el-button type="warning" size="small" :icon="Edit" @click="updateAttr(row)"></el-button>
                   <el-popconfirm @confirm="deleteValue(row.id)" :title="`你确定要删除${row.attrName}?`" confirm-button-text="确认" cancel-button-text="取消" >
                    <template #reference >
                        <el-button type="danger" size="small" :icon="Delete" ></el-button>
                      </template>
                   
                </el-popconfirm>
                   
                </template>
            </el-table-column>
    
                </el-table>

            </div>
            <div v-else>
                <el-form  :inline="true">
                    <el-form-item label="属性名字" >
                        <el-input placeholder="请输入属性的名称" size="default" v-model="saveParams.attrName" ></el-input>

               </el-form-item>
                </el-form>
                <el-button :icon="Plus" type="danger" @click="pushHandler" :disabled="saveParams.attrName.trim()?false:true">添加属性值</el-button>
                 <el-button  type="danger" @click="hideShow">取消</el-button>
                 <el-table border stripe style="margin:10px auto" :data="saveParams.attrValueList">
                    <el-table-column label="序号"  width="60" type="index">

                    </el-table-column>
                    <el-table-column label="属性值" >
                        <template #="{row,$index}">
                            <el-input :ref="el=>valueNameArr[$index]=el" v-if="row.show==true" v-model="row.valueName" placeholder="请你输入属性值" size="small" @blur="toLook(row,$index)"></el-input>
                            <div v-else @click="toEdit(row,$index)">{{row.valueName }}</div>

                        </template>

                    </el-table-column>
                    <el-table-column label="操作">
                        <template #="{row,$index}">
                            <el-popconfirm
                            width="220"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                         
                            icon-color="#626AEF"
                            :title="`你确定要删除${row.valueName}吗?`"
                            @confirm="handler($index)"
                          >
                            <template #reference>
                                <el-button type="danger" :icon="Delete" size="small" ></el-button>
                            </template>
                          </el-popconfirm>
                            
                        </template>
                    </el-table-column>
                 </el-table>
                 <el-button type="danger" :icon="Checked" @click="save" :disabled="saveParams.attrValueList.length>0?false:true">保存</el-button>
                 <el-button  type="danger" @click="hideShow">取消</el-button>
                 
                    
               
                
            </div>
           
            
            
   
        </el-card>
        
   
    </div>
</template>

<script setup lang="ts">

import useCategory from '../../../stores/category'
import pinia  from '../../../stores/index'
import {nextTick, ref, watch,onBeforeUnmount} from  'vue'
import {Edit,Delete,Plus,Checked} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import cloneDeep from 'lodash/cloneDeep'
import {reqDeleteAttr} from '../../../api/product/attr/index'
const useCategoryStore =useCategory(pinia)
const saveParams:any= ref({
    attrName: "",
  attrValueList: [
  
  ],
  categoryId: '',
  categoryLevel: 3
 
})
watch(()=>useCategoryStore.c3Id,()=>{
    if(!useCategoryStore.c3Id) return
    useCategoryStore.reqAttrList()

})
onBeforeUnmount(()=>{
    useCategoryStore.c1Arr=[]
    useCategoryStore.c2Arr=[]
    useCategoryStore.c3Arr=[]
    useCategoryStore.c1Id=''
    useCategoryStore.c2Id=''
    useCategoryStore.c3Id=''
    useCategoryStore.attrInfoList=[]
})
const valueNameArr:any=ref([])
const show:any=ref(0)
// 点击添加属性的显示与隐藏
const changeShow=()=>{
    Object.assign(saveParams.value,{
        attrName: "",
  attrValueList: [
  
  ],
  categoryId: useCategoryStore.c3Id,
  categoryLevel: 3

    })
    show.value=1
}
const hideShow=()=>{
    show.value=0
}
// 添加属性值
const pushHandler=()=>{
    saveParams.value.attrValueList.push({
        valueName:"",
        show:true
    })
    nextTick(()=>{
        valueNameArr.value[valueNameArr.value.length-1].focus()
    })
}
// 属性值转换div
const toLook=(row:any,index:any)=>{
    if(row.valueName.trim()){
        row.show=false
    }else{
        ElMessage({
            message:'属性值不能为空',
            type:'warning'
        })
    }

    let same=saveParams.value.attrValueList.find((item:any)=>{
        if(item!==row){
           return item.valueName==row.valueName

        }
       
    })
    if(same){
        ElMessage({
            message:'属性值不能相同',
            type:'warning'
        })
        saveParams.value.attrValueList.splice(index,1)
    }
    
   



}
// div文本转换为编辑模式
const toEdit=(row:any,index:any)=>{
 
    
    row.show=true
    nextTick(()=>{
     
        valueNameArr.value[index].focus()
    })
}
// save 发送请求
const save=async()=>{
    try {
        await useCategoryStore.reqSaveAtrrInfo(saveParams.value)
        ElMessage({
            type:'success',
            message:saveParams.value.id?'修改成功':'添加成功'
        })
      show.value=0
      useCategoryStore.reqAttrList()

    } catch (error) {
        ElMessage({
            type:'error',
            message:saveParams.value.id?'修改失败':'添加失败'
        })
        
    }
}
// 删除 属性值
const handler=(index:any)=>{
    
    
    
    saveParams.value.attrValueList.splice(index,1)

}
// 修改属性
const updateAttr=(row:any)=>{
    show.value=1
    Object.assign(saveParams.value,cloneDeep(row))


}
const deleteValue=async(id:number)=>{
    try {
        await reqDeleteAttr(id)
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        useCategoryStore.reqAttrList()
    } catch (error) {
        ElMessage({
            type:'error',
            message:'系统数据删不了'
        })
        
    }
  
}


</script>

<style scoped>

</style>